<template>
  <div id="loginTrend" class="card">
    <h1>用户登录趋势</h1>
    <div id="loginTrendChart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { show_success_msg, show_error_msg } from "../../js/msg.js";
import { baseUrl } from "../../main.js";
import axios from "axios";
import { tooltipEmits } from "element-plus";
export default {
  data() {
    return {
      baseUrl: baseUrl,
    };
  },
  mounted() {
    var chartDom = document.getElementById("loginTrendChart");
    var myChart = echarts.init(chartDom);
    axios.get(this.baseUrl + "/log/getLoginTrendByWeek").then((response) => {
      let reData = response.data;
      if (reData.status != 200) {
        show_error_msg("趋势获取失败", reData.msg);
        return;
      }
      let dateList = Object.keys(reData.data).map((x) => x.substr(5));
      let countList = Object.values(reData.data);

      let option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: dateList,
          axisLabel: {
            rotate: 40,
            fontSize: 11,
          },
        },
        yAxis: {
          type: "value",
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            magicType: { type: ["line", "bar"] },
            saveAsImage: {},
          },
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            name: "用户总登录次数",
            smooth: 0.3,
            data: countList,
            type: "line",
            areaStyle: {},
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(131, 162, 253, .9)",
              },
              {
                offset: 1,
                color: "rgba(1, 101, 236, .3)",
              },
            ]),
            markLine: {
              data: [
                { type: "average", name: "Avg" },
                [
                  {
                    symbol: "none",
                    x: "90%",
                    yAxis: "max",
                  },
                  {
                    symbol: "circle",
                    label: {
                      position: "start",
                      formatter: "Max",
                    },
                    type: "max",
                    name: "最高点",
                  },
                ],
              ],
            },
          },
        ],
      };
      myChart.setOption(option);
    });
  },
};
</script>

<style scoped>
h1 {
  font-size: 3vh;
  margin-left: 3px;
}
#loginTrend {
  height: 51vh;
  width: 34vw;
  padding: 20px;
}
#loginTrendChart {
  height: 96%;
  width: 99%;
  margin-top: 1%;
}
</style>